<template>
  <div>
    <!-- 导航栏 -->
    <div class="top"></div>
    <van-nav-bar title="我的订单" fixed />

    <!-- 订单切换 -->
    <van-tabs
      v-model="activeName"
      color="#f8e176"
      title-active-color="#f8e176"
      title-inactive-color="#666"
      animated
    >
      <van-tab title="全部订单" name="a">
        <img src="/img/cats/cat-order1.png" alt="" />
        <p>喵~暂时还没有订单</p>
      </van-tab>
      <van-tab title="进行中" name="b">
        <img src="/img/cats/cat-order2.png" alt="" />
        <p>喵~暂时还没有订单</p>
      </van-tab>
      <van-tab title="已完成" name="c">
        <img src="/img/cats/cat-order3.png" alt="" />
        <p>喵~暂时还没有订单</p>
      </van-tab>
      <van-tab title="取消/退款" name="d">
        <img src="/img/cats/cat-order4.png" alt="" />
        <p>喵~暂时还没有订单</p>
      </van-tab>
    </van-tabs>

    <!-- 底部 -->
    <my-footer />
  </div>
</template>

<script>
import MyFooter from "@/components/MyFooter.vue";
export default {
  components: { MyFooter },

  data() {
    return {
      activeName: 'a',
    };
  },
};
</script>

<style lang="scss" scoped>
.top {
  margin-top: 50px;
}
::v-deep .van-tabs__content{
  background-color: #f2f2f2;
  width: 100vw;
  height: 100vh;
  position: relative;
  .van-tab__pane{
    text-align: center;
    padding-top: 40vw;
    img{
      width: 35vw;
      margin-bottom: 5vw;
    }
    p{
      font-size: 0.9rem;
      color: #a7a7a7;
    }
  }
}
::v-deep .van-tab--active {
  font-weight: bold;
}

::v-deep .van-tab__text {
  font-size: 1.1rem;
}
</style>